import React, { useState, useEffect } from 'react'
import style from './my.module.css'
import { NavLink } from 'react-router-dom'
import { RightOutline } from 'antd-mobile-icons'
import { searchUserProjectList, deleteUserProject } from '../calendar/api'
import { Toast } from 'antd-mobile'
let { bg, top, welcome, login, bottom, regist, user_project, exit } = style

export default function My() {
  const { name, id } = JSON.parse(localStorage.getItem('token')) || ''
  const [userProject, setUserProject] = useState([])
  const [flag, setFlag] = useState(true)
  const searchUserProject = () => {
    searchUserProjectList(id).then(res => {
      setUserProject(res.data)
    })
  }
  const deleteUserProjectOne = id => {
    deleteUserProject(id)
  }
  useEffect(() => {
    searchUserProject()
  }, [flag])
  return (
    <div className={bg}>
      <div className={top}>
        <div className={welcome}>
          <img
            src="https://img0.baidu.com/it/u=1792540227,3843761066&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            alt=""
          />
          <div className={login}>
            {localStorage.getItem('token') ? (
              <p>{name}</p>
            ) : (
              <p>
                <NavLink to="../login">欢迎回来~~~</NavLink>
              </p>
            )}
            {localStorage.getItem('token') ? (
              <p className={regist}>
                <NavLink to="../setMy">修改个人资料</NavLink>
              </p>
            ) : (
              <p className={regist}>
                <NavLink to="../regist">马上注册,使用更多功能</NavLink>
              </p>
            )}
          </div>
        </div>
      </div>
      <div className={bottom}>
        <div>
          <p style={{ fontSize: '.2133rem', fontWeight: 'bold' }}>我的预约</p>
          <article>
            {userProject.length === 0 ? (
              <p>您没有预约哦~</p>
            ) : (
              <ul className={user_project}>
                {userProject
                  .map(item => item.project)
                  .map((item, i) => (
                    <li key={userProject[i].id}>
                      <i>{item.title}</i>
                      <i>
                        {item.date}-{item.time}
                      </i>
                      <b
                        onClick={() => {
                          setFlag(!flag)
                          deleteUserProjectOne(userProject[i].id)
                          Toast.show({
                            icon: 'success',
                            content: '取消成功',
                          })
                        }}
                      >
                        取消预约
                      </b>
                    </li>
                  ))}
              </ul>
            )}
          </article>
        </div>
        <div>
          <p>
            {localStorage.getItem('token') ? (
              <NavLink to="../setMy">
                <i className={`iconfont icon-xiugaidingdan`} />
                修改我的个人资料 <RightOutline style={{ float: 'right' }} />
              </NavLink>
            ) : (
              <NavLink to="../login">
                <i className={`iconfont icon-xiugaidingdan`} />
                修改我的个人资料 <RightOutline style={{ float: 'right' }} />
              </NavLink>
            )}
          </p>
          <p>
            <NavLink to="../about">
              <i className={`iconfont icon-women`} />
              关于我们 <RightOutline style={{ float: 'right' }} />
            </NavLink>
          </p>
          <p>
            <NavLink to="../author">
              <i className={`iconfont icon-lianxiwomen`} />
              联系作者了解更多详情 <RightOutline style={{ float: 'right' }} />
            </NavLink>
          </p>
        </div>
        {localStorage.getItem('token') === null ? (
          ''
        ) : (
          <button
            className={exit}
            onClick={() => {
              localStorage.removeItem('token')
              setFlag(!flag)
            }}
          >
            退出登录
          </button>
        )}
      </div>
    </div>
  )
}
